<template>
	<view class="personal_main">
		<view class="personal_top">
			<view class="top_left">
				<image :src="user.avatar"></image>
				<view>{{user.nickname}}</view>
			</view>
			<view class="top_rgiht">ID:{{code}}</view>
		</view>
		<view class="completed">
			<view class="completed_title" @click="nocompleted=!nocompleted">
				<view class="titles">逾期(未完成)</view>
                <view class="titles_rgiht" ><text>{{myJoinLog.expired.length}}天</text><image :class="{'titles_rgihtok':!nocompleted,'titles_rgihtno':nocompleted}" src="https://txr001.zthj.net/voucher_img/top_icon.png"></image></view>
			</view>
			<view class="main_list" v-if="nocompleted">
                <crewList :list="myJoinLog.expired" :ispersonage="ispersonage" @jumpPersonage="jumpPersonage"></crewList>
			</view>
		</view>
		<view class="completed">
			<view class="completed_title" @click="nocompleted1=!nocompleted1">
				<view class="titles">已完成</view>
				<view class="titles_rgiht" ><text>{{myJoinLog.finish.length}}天</text><image :class="{'titles_rgihtok':!nocompleted1,'titles_rgihtno':nocompleted1}" src="https://txr001.zthj.net/voucher_img/top_icon.png"></image></view>
			</view>
			<view class="main_list" v-if="nocompleted1">
                <crewList :list="myJoinLog.finish" :ispersonage="ispersonage" @jumpPersonage="jumpPersonage"></crewList>
			</view>
		</view>
	</view>
</template>

<script>
	import crewList from '../../components/voucher-component/crew_list' //列表
	export default {
		components: {
			crewList
		},
		data() {
			return {
                s_id: 0,
                user_id: 0,
                myJoinLog:{
                    expired: [],
                    finish: [],
                },
                user:{},
                code:'',

				nocompleted:true,
				nocompleted1:true,
				completed:true,
				disabled:false,
				ispersonage:false,
				personallist:[{type:1},{type:1},{type:2}],
				personallist1:[{type:1},{type:1},{type:2},{type:1},{type:1},{type:2}],
				tabsindex:0
			}
		},
		onLoad(res) {
		   console.log(res)
            this.user_id = res.user_id;
            this.s_id = res.s_id;
            uni.setNavigationBarTitle({
                title:'打卡'
            });
            this.load();
		},
		methods:{
            async load(){
                let that = this;
                let result = await that.$api.getMyJoinLog({
                    s_id: that.s_id,
                    user_id: that.user_id
                });
                that.myJoinLog = result.data.list;
                that.user = result.data.user;
                that.code = result.data.code;
            },
            jumpPersonage(res){
                console.log(res);
                if(res.join_id == 0){
                    return;
                }
                uni.navigateTo({
                    url:"/subpackage/pages/voucher/completeClock?type="+res.type + "&join_id="+res.join_id
                })
            },
		}
	}
</script>

<style lang="less" scoped>
	.personal_main{
		padding: 0 32rpx;
		.personal_top{
			padding: 48rpx 0 32rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.top_left{
				display: flex;
				align-items: center;
				image{
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;
					border-radius: 100%;
				}
				view{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #010101;
				}
			}
			.top_rgiht{
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #767879;
			}
		}
		.completed{
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			padding: 32rpx;
			margin-bottom: 32rpx;
			.completed_title{
				padding-bottom: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #D9D9D9;
				.titles{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #010101;
					line-height: 50rpx;
				}
				.titles_rgiht{
					position: relative;
					display: flex;
					text{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #767879;
						line-height: 28rpx;
						margin-right: 8rpx;
					}
					image{
						width: 32rpx;
						height: 32rpx;
						display: flex;
					}
				}
				.titles_rgihtok{
					animation: rotation 0.5s  forwards;
				}
				.titles_rgihtno{
					animation: rotatiyew 0.5s  forwards;
				}
				
				@keyframes rotation {
					 0% {
						 transform: rotate(0deg);
					 }
					 100% {
						  transform: rotate(180deg);
					 }
				}
				@keyframes rotatiyew {
					0% {
						transform: rotate(180deg);
					}
					100% {
						transform: rotate(0deg);
					}
				}
			}
			.main_list{
				padding-top: 32rpx;
			}
		}
	}
</style>